<template>
  <div>
    <!-- 轮播图区域-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :height="175">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image.image_src" width="100%" @click="toGoodsDetail(image)" />
      </van-swipe-item>
    </van-swipe>

    <!-- 分类选项区域 -->
    <van-grid :column-num="4" class="fenlei" :border="false" clickable>
      <van-grid-item
        v-for="(item, index) in getList"
        :key="index"
        :icon="item.image_src"
        :text="item.name"
        @click="handleClick(item)"
      />
    </van-grid>

    <!-- 首页楼层区域 -->
    <!-- 思路： 1.总共三层楼，每层楼里面分上下两部分
               2.floorData就是message数组，先遍历message,把楼层标题循环出来
                 然后再遍历message数据里面的product_list数组，把每一个小图片都遍历出来
               3.给每一张图片绑定点击事件 用v_for循环
    -->
    <div class="floor-container">
      <div class="floor-item" v-for="(item,index) in floorData" :key="index">
        <!-- 循环遍历楼层标题 -->
        <img class="floor-item-title" :src="item.floor_title.image_src" alt />
        <!-- 循环遍历商品楼层图片内容 -->
        <div class="floor-item-box">
          <img
            class="floor-item-pic"
            v-for="(item, index) in item.product_list"
            :key="index"
            :src="item.image_src"
            :style="{ width:item.image_width/2 + 'px' }"
            @click="goToGoodsList(item)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "test",
      // 轮播图数据列表
      images: [],
      // 分类数据列表
      getList: [],
      // 楼层数据列表
      floorData: []
    };
  },
  //在这里调用ajax请求方法
  // 生命周期
  created() {
    this.getData();
    this.cateList();
    this.getFloorData();
  },
  methods: {
    // 获取轮播图数据
    // getData() {
    //   this.$http({
    //     method: "get",
    //     url: "/home/swiperdata"
    //   }).then(res => {
    //     console.log(res.data);
    //     for (var i = 0; i < res.data.message.length; i++) {
    //       this.images.push(res.data.message[i].image_src);
    //     }
    //   });
    // },

    async getData() {
      const { data: res } = await this.$http.get("/home/swiperdata");
      // console.log(res);
      // 把后台返回的数据赋值给this.images
      this.images = res.message;
    },

    //  获取分类选项数据
    async cateList() {
      const { data: res } = await this.$http.get("/home/catitems");
      // console.log(res);

      if (res.meta.status !== 200) {
        return this.$toast.fail("数据加载失败");
      }
      this.getList = res.message;
    },
    handleClick(item) {
      if (item.name !== "分类") return false;
      this.$router.push("/cates");
    },
    //  获取商品楼层数据
    async getFloorData() {
      //  结构赋值

      const { data: res } = await this.$http.get("/home/floordata");
      if (res.meta.status !== 200) {
        return this.$toast.fail("数据加载失败");
      }
      //  后台返回的数据赋值给data里面的空数组
      this.floorData = res.message;
    },
    //  点击图片触发函数
    goToGoodsList(item) {
      // 路由导航进行页面跳转
      this.$router.push(item.navigator_url);
    },
    toGoodsDetail(item) {
      this.$router.push(
        "/pages/goods_detail/" + item.navigator_url.split("=")[1]
      );
    }
  }
};
</script>



<style lang='less' scoped>
.fenlei {
  margin: 20px 0;
}
// 楼层样式
.floor-container {
  margin-bottom: 50px;
  .floor-item-title {
    height: 25px;
    width: 320px;
  }
  .floor-item-box {
    .floor-item-pic {
      float: left;
      height: 80px;
      margin: 4px;
      margin-top: 0;
      &:nth-child(1) {
        height: 180px;
      }
    }
  }
}
</style>